<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>Tab - ESUI Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
        <link rel="stylesheet" href="assets/themes/standard.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="assets/ie8.css" />
        <![endif]-->
    </head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - Tab</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>横向Tab</h2>
            <p>横向</p>
            <div class="example">
                <div
                data-ui-type="Tab"
                data-ui-id="test"
                data-ui-height="500"
                data-ui-variants="align-right">
                    <ul data-role="navigator">
                        <li data-for="a" data-url="http://less.bootcss.com/features/">TAB1</li>
                        <li data-for="b" data-url="">TAB2</li>
                        <li data-for="c" data-url="http://less.bootcss.com/features/">TAB3</li>
                    </ul>
                </div>
                <div class="ui-tab-content ui-tab-content-top-border">
                    <div class="ui-tab-panel" title="tab1" id="a">我是Tab1</div>
                    <div class="ui-tab-panel" title="tab2" id="b">我是Tab2</div>
                    <div class="ui-tab-panel" title="tab3" id="c">我是Tab3</div>
                </div>
            </div>

            <h2>头向下Tab</h2>
            <p>头向下</p>
            <div class="example">
                <div class="ui-tab-content ui-tab-content-bottom-border">
                    <div class="ui-tab-panel" title="tab1" id="a-bottom">我是Tab1</div>
                    <div class="ui-tab-panel" title="tab2" id="b-bottom">我是Tab2</div>
                    <div class="ui-tab-panel" title="tab3" id="c-bottom">我是Tab3</div>
                </div>
                <div
                data-ui-type="Tab"
                data-ui-id="test_bottom"
                data-ui-variants="horizontal-flip">
                    <ul data-role="navigator">
                        <li data-for="a-bottom">TAB1</li>
                        <li data-for="b-bottom">TAB2</li>
                        <li data-for="c-bottom">TAB3</li>
                    </ul>
                </div>
            </div>

            <h2>纵向</h2>
            <p>纵向</p>
            <div class="example">
                <div class="ui-tab-vertical-container-left">
                    <div
                    data-ui-type="Tab"
                    data-ui-id="test2"
                    data-ui-orientation="vertical">
                        <ul data-role="navigator">
                            <li data-for="d">TAB1</li>
                            <li data-for="e">TAB2</li>
                            <li data-for="f">TAB3</li>
                        </ul>
                    </div>
                    <div class="ui-tab-content ui-tab-content-left-border">
                        <div class="ui-tab-panel" title="tab1" id="d">我是Tab1</div>
                        <div class="ui-tab-panel" title="tab2" id="e">我是Tab2</div>
                        <div class="ui-tab-panel" title="tab3" id="f">我是Tab3</div>
                    </div>
                </div>
            </div>

            <h2>Variants</h2>
            <p>反色</p>
            <div class="example">
                <div
                data-ui-type="Tab"
                data-ui-id="test-invert"
                data-ui-variants="invert">
                    <ul data-role="navigator">
                        <li data-for="a1">TAB1</li>
                        <li data-for="b1">TAB2</li>
                        <li data-for="c1">TAB3</li>
                    </ul>
                </div>
                <div class="ui-tab-content ui-tab-invert-content-top-border">
                    <div class="ui-tab-panel" title="tab1" id="a1">我是Tab1</div>
                    <div class="ui-tab-panel" title="tab2" id="b1">我是Tab2</div>
                    <div class="ui-tab-panel" title="tab3" id="c1">我是Tab3</div>
                </div>
            </div>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
        require(
            [
                'esui',
                'esui/Tab',
                'demo'
            ],
            function (ui, Tab) {
                ui.init();
            }
        );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
